<template>
	<view>
		<image class="bg" src="/static/index/index_top.png" mode="widthFix"></image>
		<view class="scroll">
			<maoScroll :data="newsList" :showNum="showNum" :lineHeight="lineHeight" :animationScroll="animationScroll" :animation="animation">
				<template v-slot="{ line }">
					<view @click="toNotice(line)" class="line">
						<text>·</text>
						{{ line.title }}
					</view>
				</template>
			</maoScroll>
		</view>
		<view style="position: relative;">
			<LoginButton @loginSuccess="toCaurse"><view @click="toCaurse" class="jy"></view></LoginButton>
			<LoginButton @loginSuccess="toCompany"><view @click="toCompany" class="px"></view></LoginButton>
			<image style="margin-top: 20rpx;" class="bg" src="/static/index/index_bottom.png" mode="widthFix"></image>
		</view>
	</view>
</template>

<script>
import LoginButton from '@/components/Login/index.vue';
import maoScroll from '@/components/mao-scroll/mao-scroll.vue';
import { fetchNoticeDataList } from '@/services/notice.js';
export default {
	components: {
		maoScroll,
		LoginButton
	},
	data() {
		return {
			showNum: 4,
			lineHeight: 60,
			animationScroll: 800,
			animation: 2000,
			newsList: []
		};
	},

	async onReady() {
		const { rows } = await fetchNoticeDataList({});
		this.newsList = rows;
	},
	methods: {
		toNotice({ noticeId }) {
			uni.navigateTo({
				url: '/pages/index/notice/index?id=' + noticeId
			});
		},
		toCompany() {
			uni.navigateTo({
				url: '/pages/company/index'
			});
		},
		toCaurse() {
			uni.switchTab({
				url: '/pages/course/index'
			});
		}
	},
	onShareAppMessage() {}
};
</script>

<style scoped>
.bg {
	width: 750rpx;
}

.scroll {
	/* height: 100rpx; */
}

.line {
	display: flex;
	align-items: center;
	font-size: 34rpx;
	padding-left: 50rpx;
	line-height: 80rpx;
}

.line text {
	font-size: 80rpx;
	margin-right: 20rpx;
	font-weight: 700;
}

.jy {
	position: absolute;
	top: 10rpx;
	left: 10rpx;
	width: 750rpx;
	height: 210rpx;
}

.px {
	position: absolute;
	top: 250rpx;
	left: 10rpx;
	width: 750rpx;
	height: 200rpx;
}
</style>
